import ProveCard from '@/components/WorkflowDesign/FlowProcesses/ProveCard.vue';
<template>
  <div>
    <h2>小部件</h2>
    <p>
      <el-text class="mx-1" size="normal"
        >通过小部件，可更加简单的接入业务系统。在业务系统上通过 iframe
        嵌套流程平台的小部件，直接展示或进行审批操作</el-text
      >
    </p>
    <br />
    <el-card shadow="never">
      <h3>对接方式：</h3>
      <p>
        <el-text class="mx-1" size="normal"
          >直接通过部件链接地址访问部件：</el-text
        >
      </p>
      <h4>部件链接地址</h4>
      <p>
        <el-text class="mx-1" size="normal"
          >http://{host}/index.html#/components/{componentName}/{appid}?access_token={access_token}
          + 部件的其他参数</el-text
        >
        <br>
        <el-text>
          其中，{access_token} 可以是流程平台token，也可以是第三方token。或者自定义身份认证插件所规定的token
        </el-text>
      </p>
      <p>
        <span>示例：</span>
        <br />
        <el-text>
          http://localhost:5173/index.html#/components/FlowDesign?taskId=75533e48-5922-4ac7-83a7-cebbf69c36eb&access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyLWluZm8iOiJ7XCJOYW1lXCI6XCLnjovkupRcIixcIklkXCI6XCIxMDAzXCIsXCJJc01hbmFnZXJcIjpmYWxzZSxcIkFwcElkXCI6XCJcIn0iLCJpc21hbmFnZXIiOiJ2aXNpdG9yIiwiaXNzIjoiV29ya0Zsb3dDb3JlIiwiYXVkIjoidXNlciIsIm5iZiI6MTczNzI3NjIyNiwiZXhwIjoxNzM3NTM1NDI2LCJpYXQiOjE3MzcyNzYyMjZ9.nREJRsAKrqVOk_QjP8F8IUf46BrzA_E1615p5-Sqc6E
        </el-text>
      </p>
    </el-card>
    <br />
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>表单详情</template>
            <img
              src="/src/assets/CompDemoImgs/FormDetail.png"
              style="width: 100%"
            />
            <template #footer>
              <h4>名称 ：</h4>
              <el-text class="mx-1" size="normal" tag="div"
                >FormDetail</el-text
              >
              <h4>参数 ：</h4>
              <el-text class="mx-1" size="normal" tag="div"
                >taskId:审批任务id</el-text
              >
              <el-text class="mx-1" size="normal" tag="div">或者</el-text>
              <el-text class="mx-1" size="normal" tag="div"
                >entityFullName:实体类型名称</el-text
              >
              <el-text class="mx-1" size="normal" tag="div"
                >entityFullValue:实体id</el-text
              >
              <br />
              <el-text class="mx-1" size="normal" tag="div"
                >这些参数都是 worktask 的值</el-text
              >
            </template>
          </el-card>

          <el-card shadow="hover">
            <template #header>流程设计</template>
            <img
              src="/src/assets/CompDemoImgs/FlowDesign.png"
              style="width: 100%"
            />
            <template #footer>
              <h4>名称 ：</h4>
              <el-text class="mx-1" size="normal" tag="div"
                >FlowDesign</el-text
              >
              <h4>参数 ：</h4>
              <el-text class="mx-1" size="normal" tag="div"
                >taskId:审批任务id</el-text
              >
              <el-text class="mx-1" size="normal" tag="div">或者</el-text>
              <el-text class="mx-1" size="normal" tag="div"
                >entityFullName:实体类型名称</el-text
              >
              <el-text class="mx-1" size="normal" tag="div"
                >entityFullValue:实体id</el-text
              >
              <br />
              <el-text class="mx-1" size="normal" tag="div"
                >这些参数都是 worktask 的值</el-text
              >
            </template>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>审批用户</template>
            <img
              src="/src/assets/CompDemoImgs/ProveUser.png"
              style="width: 100%"
            />
            <template #footer>
              <h4>名称 ：</h4>
              <el-text class="mx-1" size="normal" tag="div"
                >ProveNodeUser</el-text
              >
              <h4>参数 ：</h4>
              <el-text class="mx-1" size="normal" tag="div"
                >taskId:审批任务id</el-text
              >
              <el-text class="mx-1" size="normal" tag="div">或者</el-text>
              <el-text class="mx-1" size="normal" tag="div"
                >entityFullName:实体类型名称</el-text
              >
              <el-text class="mx-1" size="normal" tag="div"
                >entityFullValue:实体id</el-text
              >
              <br />
              <el-text class="mx-1" size="normal" tag="div"
                >这些参数都是 worktask 的值</el-text
              >
            </template>
          </el-card>

          <el-card shadow="hover">
            <template #header>审批</template>
            <img
              src="/src/assets/CompDemoImgs/ProveCard.png"
              style="width: 100%"
            />
            <template #footer>
              <h4>名称 ：</h4>
              <el-text class="mx-1" size="normal" tag="div"
                >ProveCard</el-text
              >
              <h4>参数 ：</h4>
              <el-text class="mx-1" size="normal" tag="div"
                >taskId:审批任务id</el-text
              >
              <el-text class="mx-1" size="normal" tag="div">或者</el-text>
              <el-text class="mx-1" size="normal" tag="div"
                >entityFullName:实体类型名称</el-text
              >
              <el-text class="mx-1" size="normal" tag="div"
                >entityFullValue:实体id</el-text
              >
              <br />
              <el-text class="mx-1" size="normal" tag="div"
                >这些参数都是 worktask 的值</el-text
              >
            </template>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.el-card {
  margin-top: 20px;
}
</style>
